<template>
  <!-- 自定义 DML -->
  <tr>
    <td class="first" style="padding-top: 30px; padding-bottom: 30px">
      <input type="checkbox" v-model="dml.enable" />

      <select style="margin: 10px 0 0 15px; width: 120px" v-model="dml.type">
        <option value="getOne">查询单行操作</option>
        <option value="getRows">查询多行操作</option>
        <option value="getRowsPage">查询多行操作（分页）</option>
        <option value="insert">新增操作</option>
        <option value="update">修改操作</option>
        <option value="delete">删除操作</option>
        <option value="batch-update">批量更新（TODO）</option>
        <option value="batch-delete">批量删除（TODO）</option>
        <option value="stored-procedure">存储过程（TODO）</option>
      </select>

      <div style="text-align:center;margin-top:5px;"><a @click="del">删除</a></div>

    </td>
    <td>
      <Input type="text" placeholder="操作名称（必填）也是接口 url 的一部分" v-model="dml.dir" style="width:270px" />

    </td>
    <td>
      <SqlEditor />
    </td>
    <td>
      <ApiUrl v-if="dml.enable" :method="method" :can-set-sub-dir="false" />
    </td>
  </tr>
</template>

<script>
import Common from './common';
import ApiUrl from '../info/api-url.vue';
import SqlEditor from '../info/sql-editor';

export default {
  mixins: [Common],
  components: { ApiUrl, SqlEditor },
  props: {
    index: Number
  },
  data() {
    let method;

    switch (this.dml.type) {
      case 'info':
      case 'list':
        method = 'get';
        break;
      case 'insert':
        method = 'post';
        break;
      case 'update':
        method = 'put';
        break;
      case 'delete':
        method = 'delete';
        break;
    }
    return {
      name: '',
      method: method
    };
  },
  methods: {
    del() {
      this.$delete(this.$parent.allDml.others, this.index);
    }
  }
};
</script>

<style lang="less" scoped>
textarea {
  padding: 4px 7px;
  font-size: 14px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
}
select {
  //line-height: 100%;
  padding: 0.4em 2.3em;
  margin: 10px auto;
  color: #333;
  letter-spacing: 0.3em;
  border-radius: 4px;
  border: 1px solid #ccc;
  border-bottom-color: #b4b4b4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  background-color: lightgray;
  background-repeat: repeat-x;
  transition: background-image 0.5s linear 1s;
  cursor: pointer;
  outline: 0;
  padding: 1px 4px;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-color: #abadb3;
  background: white
    url("")
    no-repeat right;
  min-height: 30px;
  font-size: 0.8rem;

  // .gradient (top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 60%, rgba(225, 223, 226, 1) 100%);

  // img {
  //     vertical-align: middle;
  // }

  // &:hover {
  //     color       : black;
  //     border-color: lighten(black, 65%);
  // }

  // &:active {
  //     box-shadow  : inset 0 3px 5px rgba(0, 0, 0, .2);
  //     border-color: lighten(black, 55%);
  // }

  // &:focus {
  //     border-color: lighten(black, 60%);
  // }
}
</style>